<template>
  <div>
    <div class="columns">
      <div class="column is-half">
        <div style="margin: 10px 5% 0px 5%">
          <columns>
            <div v-for="n in 5" :key="n">
              <column>
                <img
                  :src="'data:image/png;base64,' + images[0 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[0 + 5 * (n - 1)], n, 0)"
                />
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[1 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[1 + 5 * (n - 1)], n, 1)"
                />
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[2 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[2 + 5 * (n - 1)], n, 2)"
                />
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[3 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[3 + 5 * (n - 1)], n, 3)"
                />
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[4 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[4 + 5 * (n - 1)], n, 4)"
                />
              </column>
            </div>
          </columns>
        </div>
      </div>
      <div class="column is-half">
        <div style="margin: 10% 25% 0px 5%">
          <img
            :src="'data:image/png;base64,' + images[m + 5 * (n - 1)]"
            alt=""
          />
        </div>
        <div style="margin: 3% 25% 0px 5%" @click="downLoads('data:image/png;base64,' + images[m + 5 * (n - 1)])">
          <b-button type="is-primary">点击下载</b-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Step4",
  data() {
    return {
      color: 0,
      man: 0,
      col: 0,
      images: [],
      params: [],
      parm: [0, 0],
      n: 0,
      m: 0,
    };
  },
  methods: {
    async select(col, n, m) {
      this.man = await col[0];
      this.col = await col[1];
      this.n = await n;
      this.m = await m;
      this.parm[0] = this.man;
      this.parm[1] = this.col;
      //   console.log(this.col)
      localStorage.setItem("item3", JSON.stringify(col));
      console.log(localStorage.getItem());
      // localStorage.setItem('rows',JSON.stringify(cols))
    },

    myBrowser() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      if (userAgent.indexOf("OPR") > -1) {
        return "Opera";
      } //判断是否Opera浏览器 OPR/43.0.2442.991
      if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
      } //判断是否Firefox浏览器  Firefox/51.0
      if (userAgent.indexOf("Trident") > -1) {
        return "IE";
      } //判断是否IE浏览器  Trident/7.0; rv:11.0
      if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
      } //判断是否Edge浏览器  Edge/14.14393
      if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
      } // Chrome/56.0.2924.87
      if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
      } //判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
    },
    convertBase64UrlToBlob(base64) {
      var parts = base64.split(";base64,");
      var contentType = parts[0].split(":")[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; i++) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    downLoads(base64) {
      console.log(base64);
      var blob = this.convertBase64UrlToBlob(base64); // 转为blob对象
      // 下载
      if (this.myBrowser() == "IE") {
        window.navigator.msSaveBlob(blob, name + ".jpg");
      } else if (this.myBrowser() == "FF") {
        window.location.href = url;
      } else {
        var a = document.createElement("a");
        a.download = name;
        a.href = URL.createObjectURL(blob);
        a.click();
      }
    },
    async getItems() {
      this.color = await localStorage.getItem("item31");
      this.man = await localStorage.getItem("item32");
      // console.log(this.color)
      let rows = [];
      let cols = [];
      cols.push(parseInt(this.man));
      rows.push(parseInt(this.color));
      console.log(cols, rows);
      // for (let i = 1; i <= 24; i++) {
      //   cols.push(Math.round(Math.random() * 1000));
      // }
      for (let i = 1; i <= 25; i++) {
        let res = await this.$http.post("/api/getImages", {
          rows,
          cols,
          styles: [1, 2, 3, 4, 5, 6],
          steps: parseFloat(i / 25),
        });
        this.images.push(res.data.images[0]);
        this.params.push(res.data.params[0]);
      }
    },
  },
  created() {
    this.getItems();
  },
};
</script>
<style scoped></style>
